<template>
  <Form
    ref="taskListForm"
    :model="form"
    :rules="rules"
    @keydown.enter.native="handleSubmit"
    inline
    :label-width="80"
    >
    <Row v-if="title === '任务管理任务列表'">
      <Col :md="8" :lg="5">
        <FormItem prop="ctime" label="创建日期：">
          <!-- <DatePicker v-model="row.probation" format="yyyy-MM-dd" type="daterange" placeholder="请输入试用期" @on-change="handleChange"></DatePicker> -->
          <DatePicker v-model="form.ctime" type="date" placeholder="请选择创建日期"></DatePicker>
        </FormItem>
      </Col>
      <Col :md="10" :lg="5">
        <FormItem prop="activitytime" label="活动日期：">
          <DatePicker v-model="form.activitytime" format="yyyy-MM-dd" type="daterange" placeholder="请选择活动时间" @on-change="handleChange"></DatePicker>
        </FormItem>
      </Col>
      <Col :md="8" :lg="5">
        <FormItem prop="type" label="结算方式：">
          <Select v-model="form.type">
            <Option value="all">
              全部
            </Option>
            <Option value="3">
              口碑结算
            </Option>
            <Option value="1">
              到店结算
            </Option>
            <Option value="2">
              成交结算
            </Option>
          </Select>
        </FormItem>
      </Col>
      <Col :md="8" :lg="5">
        <FormItem prop="state" label="开启方式：">
          <Select v-model="form.state">
            <Option value="all">
              全部
            </Option>
            <Option value="0">
              关闭
            </Option>
            <Option value="1">
              启动
            </Option>
          </Select>
        </FormItem>
      </Col>
      <Col :md="8" :lg="4" style="text-align: right">
        <Button @click="handleSubmit" icon="md-search" type="primary">
          搜索
        </Button>
      </Col>
    </Row>
    <Row v-if="title === '任务管理任务数据'">
      <Col :md="8" :lg="6">
        <FormItem prop="ctime" label="创建日期：">
          <!-- <DatePicker v-model="row.probation" format="yyyy-MM-dd" type="daterange" placeholder="请输入试用期" @on-change="handleChange"></DatePicker> -->
          <DatePicker v-model="form.ctime" type="date" placeholder="请选择创建日期"></DatePicker>
        </FormItem>
      </Col>
      <Col :md="10" :lg="6">
        <FormItem prop="activitytime" label="活动日期：">
          <DatePicker v-model="form.activitytime" format="yyyy-MM-dd" type="daterange" placeholder="请选择活动时间" @on-change="handleChange"></DatePicker>
        </FormItem>
      </Col>
      <Col :md="8" :lg="6">
        <FormItem prop="type" label="结算方式：" >
          <Select v-model="form.type">
            <Option value="all">
              全部
            </Option>
            <Option value="3">
              口碑结算
            </Option>
            <Option value="1">
              到店结算
            </Option>
            <Option value="2">
              成交结算
            </Option>
          </Select>
        </FormItem>
      </Col>
      <Col :md="8" :lg="6" style="text-align: right">
        <Button @click="handleSubmit" icon="md-search" type="primary">
          搜索
        </Button>
      </Col>
    </Row>

    <!-- <FormItem prop="type" label="版页类型：" style="width: 250px">
      <Select v-model="form.type" clearable>
        <Option value="all">
          全部
        </Option>
        <Option value="活动推广">
          活动推广
        </Option>
        <Option value="产品">
          产品
        </Option>
      </Select>
    </FormItem> -->
  </Form>
</template>
<script>
import {
  mapState,
  mapActions,
  mapMutations
} from 'vuex'
export default {
  name: 'TaskListForm',
  props: {
    title: '',
    ctimeRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    activitytimeRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    typeRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    methodRules: {
      type: Array,
      default: () => {
        return []
      }
    },
    stateRules: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      activityDate: [],
      form: {
        ctime: '',
        activitytime: '',
        type: 'all',
        // method: 'all',
        state: 'all'
      }
    }
  },
  computed: {
    rules () {
      return {
        ctime: this.ctimeRules,
        activitytime: this.activitytimeRules,
        type: this.typeRules,
        method: this.methodRules,
        state: this.stateRules
      }
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.taskListForm.validate((valid) => {
        if (valid) {
          this.$emit('on-success-valid', {
            ctime: this.form.ctime ? this.$moment(this.form.ctime).format('YYYY-MM-DD') : '',
            // activitytime: this.activityDate,
            btime: this.activityDate[0],
            etime: this.activityDate[1],
            type: this.form.type !== 'all' ? parseInt(this.form.type) : '',
            // method: this.form.method !== 'all' ? parseInt(this.form.method) : '',
            state: this.form.state && this.form.state !== 'all' ? parseInt(this.form.state) : ''
            // muid: this.form.muid ? parseInt(this.form.muid) : ''
          })
        }
      })
    },
    handleChange (value) {
      this.activityDate = value
    }
  }
}
</script>
